<template>
  <div class="app-container">
    <!-- 顶部操作区 -->
    <div class="header-container">
      <div class="left-buttons">
        <el-button
          type="primary"
          icon="el-icon-back"
          size="small"
          @click="goBack"
        >
          返回
        </el-button>
      </div>
      <div class="title-container">
        <h2>文件管制总览</h2>
      </div>
      <div class="right-buttons">
        <!-- 预留右侧按钮位置，保持布局对称 -->
      </div>
    </div>

    <!-- 搜索和操作区域 -->
    <div class="filter-container">
      <div class="search-area">
        <el-input
          v-model="listQuery.fileNumber"
          placeholder="请输入文件编号"
          clearable
          prefix-icon="el-icon-search"
          style="width: 200px;"
          @keyup.enter.native="handleFilter"
          @clear="handleFilter"
        />
        <el-button type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <div class="operation-area">
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
          新增
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="!selectedIds.length"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        stripe
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="文件编号" prop="fileNumber" min-width="120" show-overflow-tooltip />
        <el-table-column label="文件名称" prop="fileName" min-width="150" show-overflow-tooltip />
        <el-table-column label="制订部门" prop="department" min-width="120" show-overflow-tooltip />
        <el-table-column label="版本" prop="version" width="100" align="center" />
        <el-table-column label="附表份数" prop="scheduleCopies" width="100" align="center" />
        <el-table-column label="文件类别" width="200" align="center">
          <template slot-scope="{row}">
            <el-tag v-if="row.fileCategory.includes('MANAGEMENT_MANUAL')" size="small" type="primary">管理手册</el-tag>
            <el-tag v-if="row.fileCategory.includes('PROCEDURE')" size="small" type="success">程序</el-tag>
            <el-tag v-if="row.fileCategory.includes('SPECIFICATION')" size="small" type="warning">规范</el-tag>
            <el-tag v-if="row.fileCategory.includes('TECHNICAL_DOCUMENT')" size="small" type="info">技术文件</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleView(row)">
              查看
            </el-button>
            <el-button type="success" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { getFileControlPage, removeFileControls } from '@/api/file-control'
import Pagination from '@/components/Pagination'

export default {
  name: 'FileControlList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        fileNumber: undefined
      },
      selectedIds: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    goBack() {
      this.$router.push('/main/biao/wenjianzl')
    },
    getList() {
      this.listLoading = true
      getFileControlPage(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data.data.records
        this.total = response.data.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSelectionChange(val) {
      this.selectedIds = val.map(item => item.id)
    },
    handleCreate() {
      this.$router.push({
        path: '/main/biao/wenjianzl',
        query: {
          mode: 'create'
        }
      })
    },
    handleView(row) {
      this.$router.push({
        path: '/main/biao/wenjianzl',
        query: {
          id: row.id,
          mode: 'view'
        }
      })
    },
    handleUpdate(row) {
      this.$router.push({
        path: '/main/biao/wenjianzl',
        query: {
          id: row.id,
          mode: 'edit'
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeFileControls([row.id]).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    },
    handleBatchDelete() {
      this.$confirm(`确认删除选中的${this.selectedIds.length}条记录?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeFileControls(this.selectedIds).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #fff; */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;

}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-container {
  text-align: center;
  flex-grow: 1;
}

.title-container h2 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.left-buttons, .right-buttons {
  min-width: 100px;
}

.filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 18px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.operation-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-container {
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

:deep(.el-table) {
  margin-top: 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

.el-button + .el-button {
  margin-left: 10px;
}

.el-tag + .el-tag {
  margin-left: 5px;
}
</style> 